<style>
  .layui-form-label{
    text-align: left;
  }
  .liactive{
    background: #dcdcdc;
  }
</style>
<title>添加部门</title>
<div class="layui-card layadmin-header">
  <div class="layui-breadcrumb" lay-filter="breadcrumb">
    <a lay-href="">主页</a>
    <a><cite>系统管理</cite></a>
    <a><cite>结构管理</cite></a>
    <a><cite>编辑部门</cite></a>
  </div>
</div>
<div class="layui-fluid">
  <div class="layui-row layui-col-space15">

  <div class="layui-card">
    <div class="layui-card-header">编辑部门</div>
    <div class="layui-card-body" style="padding: 15px;" >
      <form class="layui-form" action="" lay-filter="component-form-group">
        <div class="layui-form-item">
          <div class="layui-inline">
            <label class="layui-form-label required">部门名称</label>
            <div class="layui-input-inline">
              <input type="hidden" name="deptId"  id="deptId"/>
              <input type="text" name="deptName" lay-verify="required|deptName"
                     autocomplete="off" placeholder="请输入部门名称" class="layui-input">
            </div>
          </div>
          <div class="layui-inline">
            <label class="layui-form-label">上级部门</label>
            <div class="layui-input-inline">
              <input type="hidden" id="parentId" name="parentId" value="" lay-filter="parentId" />
              <input type="text" id="parentName" disabled="disabled" name="parentName"
                      lay-verify="required|loginName"
                     autocomplete="off" placeholder="请选择" class="layui-input"  lay-filter="parentName">
            </div>
            <button class="layui-btn" id="parent-btn" type="button">请选择</button>
          </div>
          <div class="layui-inline">
            <label class="layui-form-label required">部门编码</label>
            <div class="layui-input-inline">
              <input type="text" name="deptCode" lay-verify="required|deptCode"
                     autocomplete="off" placeholder="请输入部门编码" class="layui-input">
            </div>
          </div>
          <div class="layui-inline">
            <label class="layui-form-label required">状态</label>
            <div class="layui-input-inline">
              <select name="status" id="status" lay-verify="required" >
                <option value="1">删除</option>
                <option value="0">有效</option>
              </select>
            </div>
          </div>
        </div>
        <div class="layui-form-item" style="text-align: right">
          <div class="layui-input-block">
            <button class="layui-btn" lay-submit="" lay-filter="component-form-ts-dept">立即提交</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            <a lay-href="/dept/list" class="layui-btn layui-btn-primary">
              <i class="layui-icon layui-icon-return"></i>返回
            </a>
          </div>
        </div>
      </form>
    </div>

  </div>
  </div>
</div>
<script>
layui.use(['admin','table','tree','format','common','laytpl'], function(){
          var laytpl = layui.laytpl;
          var $ = layui.$
          ,admin = layui.admin
          ,common = layui.common
          ,layer = layui.layer
          ,form = layui.form;
        /* 自定义验证规则 */
        form.verify({
          deptName: function(value){
            if(value.length < 3){
              return '部门至少得3个字符啊';
            }
          }
        });
      admin.req({
        url: common.basePath+'system/tsDept/findTsDept.do' //实际使用请改成服务端真实接口
        ,data: {deptId:layui.router().search.deptId}
        ,type:'get'
        ,done: function(res){
          debugger
         // from.val(res.data);
          form.val("component-form-group",res.data);
        },success:function (res) {
        },error:function (res) {
        }});


        /* 监听提交 */
        form.on('submit(component-form-ts-dept)', function(data){
          admin.req({
             url: common.basePath+'system/tsDept/saveTsDept.do' //实际使用请改成服务端真实接口
            ,data: data.field
            ,type:'get'
            ,done: function(res){
                 console.log(res);
                 if(res.code == 0){
                 layer.msg(res.msg, {
                     offset: '15px'
                     ,icon: 1
                     ,time: 1000
                   }, function(){
                     location.hash = '/dept/list';
                   });
                 }else {
                   layer.msg(res.msg, {
                     offset: '200px'
                     , icon: 2
                     , time: 1000
                   }, function () {
                   });
                   return ;
                 }
            },success:function (res) {
            },error:function (res) {
            }});
          return false;
        });
      /**
       * 防止多个进行绑定事件
       */
      $(document).off('click', '#parent-btn');
      $(document).on('click', '#parent-btn', function() {
        var deptId ="";
        var deptName="";
        layer.closeAll();
        var html ="<div><ul id='dept-tree'></ul></div>" ;
        layer.open({
          type: 1,
          area:['400px','400px'],
          title:'上级部门',
          scrollbar:true,
          btn:['确定','取消'],
          content: html, //注意，如果str是object，那么需要字符拼接。
          yes:function (index, layero) {
            layer.close(index);
            $("#parentId").val(deptId);
            $("#parentName").val(deptName);
          },
          btn2:function (index) {
            layer.close(index);
          },
          cancel:function () {

          }
        }
        );
        $.post(common.basePath+'system/tsDept/getDeptAndChildDepts.do', {access_token: layui.data('layuiAdmin').access_token}, function(res){
          var data = eval (res);
          layui.tree({
            elem: '#dept-tree' //传入元素选择器
            ,nodes: data
            ,click: function(item){
              deptId = item.id ;
              deptName = item.name ;
            }
          });

        });


        /**
         * 清除样式
         */
        $("body").on("mousedown",".layui-tree a",function(){
         // if(!$(this).siblings('ul').length){
            $(".layui-tree a cite").parent().removeClass('liactive') ; //css('color','#333');
            $(this).find('cite').parent().addClass('liactive'); //.css('color','red');
         // }
        });


      });



});
</script>